<template>
    <el-card class="asset-brief-card" shadow="hover">
      <!-- 头部：名称+可选操作插槽 -->
      <div class="abc-header">
        <div class="abc-title">
          <el-icon class="abc-title__icon"><Cpu /></el-icon>
          <!-- <span class="abc-title__text" :title="display(row, nameKey)">{{ display(row, nameKey) || '设备基本信息' }}</span> -->
        </div>
        <div class="abc-actions">
          <slot name="actions" :row="row" />
        </div>
      </div>
  
      <!-- 内容：网格化字段 -->
      <div class="abc-grid" :style="{ '--cols': columns }">
        <div
          v-for="f in normalizedFields"
          :key="f.key"
          class="abc-item"
        >
          <div class="abc-item__label">{{ f.label }}</div>
          <el-tooltip :content="display(row, f.key) || '—'" placement="top" :disabled="!display(row, f.key)">
            <div class="abc-item__value one-line">
              {{ display(row, f.key) || '—' }}
              <el-button
                v-if="copyable && display(row, f.key)"
                link
                size="small"
                class="abc-copy"
                @click.stop="copy(display(row, f.key))"
                :title="`复制 ${f.label}`"
              >
                <el-icon><CopyDocument /></el-icon>
              </el-button>
            </div>
          </el-tooltip>
        </div>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Cpu, CopyDocument } from '@element-plus/icons-vue'
  
  /**
   * Props
   * - row: 父级传入的一整条数据对象
   * - columns: 网格列数（默认 4 列）
   * - fields: 自定义字段映射（可选）；不传则使用默认的 7 个字段
   * - nameKey: 头部标题使用的 key（默认 deviceName）
   * - copyable: 是否显示逐项复制按钮
   */
  const props = defineProps({
    row: { type: Object, default: () => ({}) },
    columns: { type: Number, default: 4 },
    nameKey: { type: String, default: 'deviceName' },
    copyable: { type: Boolean, default: true },
    // 可覆盖的字段定义：[{ label, key }]
    fields: {
      type: Array,
      default: () => ([
        { label: '设备名称', key: 'name' },
        { label: '设备规格', key: 'code' },
        { label: '设备型号', key: 'nodeType' },
        { label: '设备材质', key: 'createTime' },
        { label: '设备功率', key: 'id' },
        { label: '设备品牌', key: 'type' },
        { label: '制造厂家', key: 'spareInfo.code' },
      ])
    } 
  })
  console.log(props.row);
  /** 兼容：允许 key 写成 'spareInfo.name' 这种点路径 */
  function getByPath(obj, path) {
    if (!obj || !path) return undefined
    const parts = String(path).split('.')
    let cur = obj
    for (const p of parts) {
      if (cur == null) return undefined
      cur = cur[p]
    }
    return cur
  }
  const display = (row, key) => {
    const v = getByPath(row, key)
    return v === 0 ? 0 : (v ?? '')
  }
  
  const normalizedFields = computed(() =>
    (props.fields || []).map(f => ({ label: f.label, key: f.key }))
  )
  
  const nameKey = computed(() => props.nameKey)
  
  function copy(text) {
    navigator.clipboard?.writeText(String(text))
    ElMessage.success('已复制')
  }
  </script>
  
  <style scoped>
  .asset-brief-card{
    /* border-radius: 12px;
    overflow: hidden; */
  }
  
  /* 头部：左标题右操作 */
  .abc-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom: 8px; 
  }
  .abc-title{ display:flex; align-items:center; gap:8px; min-width:0; }
  .abc-title__icon{ color: var(--el-color-primary); }
  .abc-title__text{
    font-weight: 700;
    font-size: 16px;
    max-width: 38ch;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  
  /* 网格：可配置列数 */
  .abc-grid{
    --cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 10px 12px;
  }
  
  /* 单项：标签 + 值（值可复制） */
  .abc-item{
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--el-fill-color-blank);
    transition: box-shadow .12s ease, border-color .12s ease;
  }
  .abc-item:hover{
    box-shadow: var(--el-box-shadow-lighter);
    border-color: var(--el-color-primary-light-7);
  }
  .abc-item__label{
    font-size: 12px;
    color: var(--el-text-color-secondary);
    margin-bottom: 4px;
  }
  .abc-item__value{
    font-size: 14px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    display: flex; align-items: center; gap: 6px;
  }
  
  /* 复制按钮更轻量 */
  .abc-copy{ padding: 0 2px; }
  
  .one-line{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* 小屏降列数（可按需调整断点） */
  @media (max-width: 1280px){
    .abc-grid{ --cols: 3; }
  }
  @media (max-width: 768px){
    .abc-grid{ --cols: 2; }
  }
  </style>
  